<template>
    <view class="comment-eg">
        <hb-comment ref="commentList" @add="add" @focusOn="focusOn" :cmData="commentData"
            v-if="commentData"></hb-comment>
    </view>
</template>

<script>
    export default {
        name: 'comment-eg',
        props: {
            articleId: {
                type: String,
                default: () => {
                    return null;
                }
            },
            shareId: {
                type: String,
                default: () => {
                    return null;
                }
            },
        },
        watch: {
            articleId: {
                handler: function(newVal, oldVal) {
                    if (newVal) {
                        this.getComment(newVal);
                    }
                },
                immediate: true
            },
            shareId: {
                handler: function(newVal, oldVal) {
                    if (newVal) {
                        this.shareid = newVal;
                    }
                },
                immediate: true
            }

        },
        data() {
            return {
                commentData: null,
                reqFlag: false, // 请求标志，防止重复操作，true表示请求中
                commentList: [],
                userInfo: {},
                paramter: {},
                shareid: ""
            }
        },
        //在视图渲染完之后，才执行mouted（）
        mounted() {
            this.userInfo = uni.getStorageSync("user");
            this.getComment();
            console.log(this.userInfo);
        },
        methods: {
            // 获取评论
            getComment() {
                //uni.request是异步请求，多开一个单独的线程去服务器拿数据，
                //commentList数组是静态页面，渲染数据的时候会更快，导致
                //commentList还没赋值数据就被加载，所以使得他的数据为空
                uni.request({
                    url: '/gongyi/comment/getAllShareComment?id=' + this.shareid,
                    method: 'GET',
                    success: (res) => {
                        this.commentList = res.data.comment;

                        console.log(res.data.comment);
                        this.commentData = {
                            "commentSize": this.commentList.length,
                            "comment": this.getTree(this.commentList)
                        };
                    }
                })

            },
            focusOn() {

            },
            // 新增评论
            async add(req) {
                if (this.reqFlag) {
                    uni.showToast({
                        title: '操作频繁',
                        duration: 1000
                    });
                    return
                }
                this.reqFlag = true;
                this.paramter = {
                    "content": req.content,
                    "userId": this.userInfo.id,
                    "shareId": this.shareid
                }
                console.log("----------------", this.paramter)
                // TODO 接入真实接口
                uni.request({
                    url: '/gongyi/comment/insertShareComment',
                    method: 'POST',
                    data: JSON.stringify(this.paramter),
                    success: (res) => {
                        if (res.data.success) {
                            uni.showToast({
                                title: "评论成功",
                                icon: 'none'
                            });
                            this.getComment();
                            this.reqFlag = false;
                            this.$refs.hbComment.addComplete();
                        } else {
                            uni.showToast({
                                title: "评论失败",
                                icon: 'none'
                            })
                        }
                    }
                });
            },
            // 列表按照父子转换成树
            getTree(data) {
                let result = [];
                data.forEach(item => {
                    result.push(item)
                });
                return result;
            }
        }
    }
</script>

<style>
</style>